<div class="greenBar blackCorner whiteTitle endBar" id="dashboard_bar" style="padding:0;">
    <div id="dashboard_title" class="whiteTitle">
        {icon name="home.png"} {t}Dashboard{/t}
        <div id="dashboard_config"><a href="/bo/#/backoffice/ListDashboard/fr" class="nyroModal">{icon name="config_dashboard.png" size="1616"} {t}Dashboard options{/t}</a></div>
    </div>
    
</div>
<div id="dashboard">
    <link href="{$URL_RELATIVE}/themes/{$BACK_THEME}/backend/css/dashboards.css" type="text/css" rel="stylesheet"/>
    
    {hasRight rule="backoffice_accessSystem"}
    <div class="board" id="backoffice_system">
                    {block module=backoffice action=dashBoardSystem}
    </div>
    {/hasRight}
    {foreach from=$boards item=board}
        {assign var=mod value=$board.module|capitalize}
        {assign var=right value="access_$mod backoffice_access$mod"}
        {hasRight rule=$right}
        <div class="board sortable" id="{$board.module}_{$board.title}">
                        {block module=$board.module action=$board.action}
        </div>
        {/hasRight}
    {/foreach}
</div>
{literal}
<script type="text/javascript">
    $('#dashboard').sortable({
        cursor: 'move',
        tolerance: 'pointer',
        items: 'div.sortable',
        stop: function(event, ui) {
            /*Build Array*/
            var listBoards = '';
            $('.board').each(function() {
                listBoards += ';'+$(this).attr('id');
            });

            $.ajax( {
              	url: '?module=backoffice&action=AjaxChangeDashBoardOrder',
   		data: {param:listBoards}
            });
        }
    });
</script>
{/literal}